<template>
  <Card title="增值服务">
   <div class="add-service-list">
    <div class="add-service-item" v-for="(item,index) in info" :key="index">
      <div class="add-service-item-header">
        <div class="add-service-item-title">{{ item.service_name }}</div>
        <div class="add-service-item-extra">
          <div class="add-service-item-price">¥{{ item.service_price_amount }}</div>
          <div class="add-service-item-check">
            <!-- 必选 -->
            <text class="already-exist" v-if="item.is_fixed">已含</text>
            <u-checkbox class="checkbox" v-else shape="circle" v-model="item.checked" :disabled="false" @change="onCheckChange" />
          </div>
        </div>
      </div>
      <div class="add-service-item-content">
        <!-- 增值服务内包含 -->
        <template v-if="item.list_include && item.list_include.length > 0">
          <div class="add-service-list-item" v-for="(deItem,deIndex) in item.list_include" :key="'include-' + deIndex">
            <div class="add-service-list-item-content">
              <div class="add-service-list-item-icon">
                <u-icon name="checkmark" color="#42b983" size="28"></u-icon>
              </div>
              <div class="add-service-list-item-content">{{ deItem }}</div>
            </div>
            <u-line margin="12rpx 0" />
          </div>
        </template>
        <template v-if="item.list_exclude && item.list_exclude.length > 0">
          <div class="add-service-list-item" v-for="(deItem,deIndex) in item.list_exclude" :key="'exclude-' + deIndex">
            <div class="add-service-list-item-content">
              <div class="add-service-list-item-icon">
                <u-icon name="info-circle" size="28"></u-icon>
              </div>
              <div class="add-service-list-item-content">{{ deItem }}</div>
            </div>
            <u-line margin="12rpx 0" />
          </div>
        </template>
      </div>
    </div>
   </div>
  </Card>
</template>
<script>
import Card from "./card.vue";
import DescriptionsItem from "./descriptionsItem.vue";
export default {
  data() {
    return {};
  },
  props: {
    info: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {
    Card,
    DescriptionsItem,
  },
  methods: {
    onCheckChange() {
      this.$nextTick(() => {
        this.$emit('change')
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.add-service-item-header {
  display: flex;
  justify-content: space-between;
  .add-service-item-title {
    color: #222;
    font-weight: 600;
  }
  .add-service-item-extra {
    .add-service-item-price {
      color: #222;
      font-weight: 600;
      margin-right: 10rpx;
      display: inline-block;
    }
    .add-service-item-check {
      display: inline-block;
      .already-exist {
        color: #797474;
      }
      .checkbox {
        width: 19px;
      }
    }
  }
}
.add-service-item-content {
  padding: 10rpx 0;
  .add-service-list-item {
    .add-service-list-item-content {
      display: flex;
      .add-service-list-item-icon {
        margin-right: 12rpx;
      }
    }
  }
}

</style>
